<!--
 * @Description: 血型查询
 * @Author: ZhangHan
 * @Date: 2025-08-29 14:51:42
 * @LastEditTime: 2025-08-29 16:07:35
 * @LastEditors: ZhangHan
-->
<template>
  <view class="bloodpage">
    <view class="header">选择父母血型 </view>
    <view class="subhead">父亲血型 </view>
    <view class="choicecard">
      <uni-data-select
        v-model="valuef"
        :localdata="getPickerData(BloodType)"
        @change="changeF"
      ></uni-data-select>
    </view>
    <view class="subhead">母亲血型 </view>
    <view class="choicecard">
      <uni-data-select
        v-model="valuem"
        :localdata="getPickerData(BloodType)"
        @change="changeM"
      ></uni-data-select>
    </view>

    <view class="searchbtn" @click="handleSearch">
      <uni-icons
        type="search"
        color="#ffffff"
        class="icon"
        size="24"
      ></uni-icons>
      查询子女可能血型
    </view>

    <uni-group title="查询结果" v-if="resultInfo" mode="card">
      <view class="result_text">
        父母血型组合:
        <span class="text">{{ resultInfo?.ResulTtext }}</span>
      </view>
      <view class="success">√可能的血型</view>
      <view class="mr_b">
        <uni-tag
          v-for="item in resultInfo?.result?.possible"
          :text="item"
          type="success"
          class="tag"
        />
      </view>
      <view class="error"> ×不可能的血型 </view>
      <view class="mr_b">
        <uni-tag
          class="tag"
          v-for="item in resultInfo?.result?.impossible"
          :text="item"
          type="error"
        />
      </view>
    </uni-group>
    <view class="tips">
      <view class="tips_name">血型遗传知识</view>
      血型由父母的基因决定，遵循孟德尔遗传定律。人类ABO血型系统由A、B、O三个等位基因控制，其中A和B为显性基因，O为隐性基因。
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useMessage } from "@/hooks/useMessage";
import { getPickerData } from "@/utils/common";
import { BloodType } from "@/concacts/valueEnum";

const { error } = useMessage();
const valuef = ref();
const valuem = ref();
const resultInfo = ref();

// 血型遗传数据
const bloodTypeData: any = {
  "A+A": { possible: ["A", "O"], impossible: ["B", "AB"] },
  "A+B": { possible: ["A", "B", "AB", "O"], impossible: ['无'] },
  "A+AB": { possible: ["A", "B", "AB"], impossible: ["O"] },
  "A+O": { possible: ["A", "O"], impossible: ["B", "AB"] },
  "B+B": { possible: ["B", "O"], impossible: ["A", "AB"] },
  "B+AB": { possible: ["A", "B", "AB"], impossible: ["O"] },
  "B+O": { possible: ["B", "O"], impossible: ["A", "AB"] },
  "AB+AB": { possible: ["A", "B", "AB"], impossible: ["O"] },
  "AB+O": { possible: ["A", "B"], impossible: ["AB", "O"] },
  "O+O": { possible: ["O"], impossible: ["A", "B", "AB"] },
  "B+A": { possible: ["A", "B", "AB", "O"], impossible: [] },
  "AB+A": { possible: ["A", "B", "AB"], impossible: ["O"] },
  "O+A": { possible: ["A", "O"], impossible: ["B", "AB"] },
  "AB+B": { possible: ["A", "B", "AB"], impossible: ["O"] },
  "O+B": { possible: ["B", "O"], impossible: ["A", "AB"] },
  "O+AB": { possible: ["A", "B"], impossible: ["AB", "O"] },
};

//父亲血型改变
const changeF = (e: any) => {
  console.log(e);
};

//母亲血型改变
const changeM = (e: any) => {
  console.log(e);
};

//点击生成查询结果
const handleSearch = () => {
  if (valuef.value && valuem.value) {
    const fatherBlood = BloodType[valuef.value]?.text;
    const momBlood = BloodType[valuem.value]?.text;
    const ResulTtext = `${fatherBlood}+${momBlood}`;
    const result = bloodTypeData[`${fatherBlood}+${momBlood}`];
    console.log(result);
    resultInfo.value = {
      ResulTtext,
      result,
    };
  } else {
    error("请选择完整血型");
  }
};
</script>

<style scoped lang="scss">
.bloodpage {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 32rpx;
  background: white;
}

.header {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
}

.subhead {
  font-size: 24rpx;
  margin-bottom: 24rpx;
}

.choicecard {
  margin-bottom: 20rpx;
}

.searchbtn {
  margin-top: 32rpx;
  width: 100%;
  height: 96rpx;
  font-size: 30rpx;
  color: white;
  background-color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;
  margin-bottom: 32rpx;
  .icon {
    margin-right: 10rpx;
  }
}

.result_text {
  color: #6b7280;
  margin-bottom: 12rpx;
  .text {
    color: #333333;
  }
}

.success {
  color: #10b981;
  margin-bottom: 12rpx;
}

.error {
  color: #ef4444;
  margin-bottom: 12rpx;
}

.tag {
  margin-right: 18rpx;
}

.mr_b {
  margin-bottom: 12rpx;
}

.tips {
  width: 100%;
  box-sizing: border-box;
  padding: 32rpx;
  background: #eff6ff;
  border-radius: 20rpx;
  margin-top: 32rpx;
  .tips_name {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 12prx;
    color: rgb(55, 118, 236);
  }
  color: #333333;
}
</style>
